<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天窗口</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link href="css/chat.css" rel="stylesheet" type="text/css">
    <script src="js/chat.js"></script>
</head>

<body>
<div class="contain">
    <div class="top">
        <div class="top-box">
        </div>
    </div>
    <div class="bottom">
        <div class="input">
            <textarea name="send_content" id="send_content" cols="80" rows="9"></textarea>
        </div>
        <div class="send">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
</div>

<script src="js/chat.js"></script>
</body>
<script>

    let type //群聊|私聊
    let id  //群聊gid，私聊对方uid
    let user

    function init(showUnReadDigest) {
        $.get('/Vikutorika/user?methodName=getInfo',
            function (resp) {
                user = resp.data
                $.get('/Vikutorika/chat?methodName=pullOfflineUnread',
                    {uid: user.uid},
                    function (resp) {
                        showUnReadDigest(resp.data)
                    }, 'json')
                waitMessage(showUnReadDigest);
            }, 'json')
    }

    //好友列表点击后执行，初始化聊天窗口
    function set(types, ids) {
        type = types
        id = ids
        $('.top-box').empty()
        pullHistory();
    }

    //可视化响应中的消息记录
    function showMessage(resp) {
        let data = resp.data
        if (data != null) {
            for (let i = data.length - 1; i >= 0; i--) {
                if (data[i].type != type || data[i].type == "群聊" && data[i].gid != id || data[i].type == "私聊" &&
                    (data[i].sender_uid != user.uid && data[i].sender_uid != id)) {
                    return;
                }
                let chat_html = null;
                if (data[i].sender_uid === user.uid) {
                    chat_html =
                        `<div class="chat-lst-2">
                         <div class="chat-content-2">` + data[i].content + `</div>
                         <div class="pic"><img src="` + data[i].head_portrait + `" alt="profile picture"></div>
                         </div>`;
                } else {
                    chat_html =
                        `<div class="chat-lst-1">
                         <div class="pic"><img src="` + data[i].head_portrait + `" alt="profile picture"></div>
                         <div class="chat-content-1">` + data[i].content + `</div>
                         </div>`;
                }
                $('.top-box').append(chat_html);
                $('.top-box').scrollTop(99999);
            }
        }
    }

    //拉取历史消息
    function pullHistory() {
        $.get("/Vikutorika/chat?methodName=pullHistory",
            {
                uid: user.uid,
                type: type,
                id: id,
                count: 100   //拉取前100条记录
            },
            function (resp) {
                showMessage(resp);
            }, 'json');
    }

    //拉取未读消息
    function pullUnread(showUnReadDigest) {
        $.get("/Vikutorika/chat?methodName=pullUnread",
            {
                uid: user.uid,
                type: type,
                id: id,
            },
            function (resp) {
                showMessage(resp);
                waitMessage(showUnReadDigest);
            }, 'json');
    }

    function waitMessage(showUnReadDigest) {
        $.ajax({
            url: "/Vikutorika/chat?methodName=waitMessage",
            type: 'post',
            dataType: 'json',
            data: {uid: user.uid},
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].id == id && data[i].type == type) {
                        pullUnread(showUnReadDigest)
                    }
                    showUnReadDigest(data[i])
                }
            }
        });
    }

    function sendMessage() {
        $.post('/Vikutorika/chat?methodName=sendMessage',
            {
                uid: user.uid,
                type: type,
                id: id,
                content: $('#send_content').val()
            },
            function (response) {
                let chat_html = `<div class="chat-lst-2">
        <div class="chat-content-2">` + $('#send_content').val() + `</div>
        <div class="pic"><img src="` + user.head_portrait +
                    `" alt="profile picture"></div>
        </div>`;
                $('.top-box').append(chat_html);
                $('.top-box').scrollTop(99999);
                $('#send_content').val('')
            }, 'json');
    }
</script>
</html>